<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import * as PIXI from "pixi.js";
import { SimplePixil } from "Gab/views/PIXI2D/SimplePixil/index";
import { useRoute } from "vue-router";
import { GabRoutes } from "src/router/modules/Gab";

const GabDom = ref<HTMLDivElement>();

const route = useRoute();

let app: PIXI.Application;

onMounted(() => {
  return;
  drawMaid(GabDom.value!);
});

function drawMaid(dom: HTMLDivElement) {
  app = new PIXI.Application({
    width: dom.clientWidth,
    height: dom.clientHeight,
    resolution: window.devicePixelRatio,
    autoDensity: true,
    antialias: true,
    backgroundAlpha: 0,
    resizeTo: dom,
  });
  app.view.style!.width = "100%";
  app.view.style!.height = "100%";
  dom.appendChild(app.view as unknown as Node);
  new SimplePixil(app, {
    size: 100,
    grids: 21,
    x: 10,
    y: 10,
    data: SimplePixil.Maid,
  });
}
// ٩̋(๑˃́ꇴ˂̀๑) !!
const childrenRouter = computed(() => {
  return GabRoutes.children?.find((e) => {
    return e.name === route.matched[2].name;
  })?.children;
});
</script>

<template>
  <div ref="GabDom" class="Gab-PIXI2D w-full h-full flex">
    <aside class="G-aside h-full w-60 box-border flex flex-col gap-6 p-6">
      <router-link
        v-for="item in childrenRouter"
        :to="{ name: item.name }"
        class="G-aside-item"
        :class="{ onActive: route.name === item.name }"
        >{{ item.meta!.label }}</router-link
      >
    </aside>
    <main class="flex-auto relative">
      <router-view />
    </main>
  </div>
</template>

<style lang="less" scoped>
aside {
  border-right: var(--vast-default-border);
  .G-aside-item {
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    line-height: 2.5rem;
    &.onActive {
      font-size: 1.25rem;
      color: #56EE8F;
    }
  }
}
</style>
